<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title th:text="${#session.getAttribute('title')}">Title</title>
    <link th:href="@{/css/admin/index.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <link th:href="@{/css/footer.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <script th:src="@{/webjs/jquery-1.10.1.min.js}" type="text/javascript"></script>
    <link th:href="@{/webcss/bootstrap.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <script th:src="@{/webjs/bootstrap.js}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
          integrity="sha384-..." crossorigin="anonymous">
</head>
<style>
    .letter-button-highlight {
        background-color: yellow; /* 或者任何你想要的颜色 */
    }

    .pagination {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    /* 添加新的样式 */
    .operation-btn, .operation-btn-password, .operation-btn-class {
        cursor: pointer;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        text-decoration: none;
        margin-right: 5px;
    }

    .operation-btn {
        background-color: #dc3545; /* 删除按钮颜色 */
    }

    .operation-btn-password {
        background-color: #007bff; /* 重置密码按钮颜色 */
    }

    .operation-btn-class {
        background-color: #ffae00; /* 修改年级按钮颜色 */
    }

    .operation-btn:hover, .operation-btn-password:hover, .operation-btn-class:hover {
        opacity: 0.8;
    }

    @media (max-width: 768px) {
        .operation-btn, .operation-btn-password, .operation-btn-class {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }
    }

    /* CSS 示例 */
    .view-record-link {
        color: #007bff; /* 设置链接颜色 */
        text-decoration: none; /* 移除下划线 */
        cursor: pointer; /* 设置鼠标悬停时的指针形状 */
        font-weight: bold; /* 加粗字体 */
        transition: color 0.3s ease; /* 平滑过渡效果 */
    }

    .view-record-link:hover {
        color: #0056b3; /* 鼠标悬停时的颜色变化 */
    }

    .letter-buttons {
        gap: 5px;
    }

    .letter-button {
        text-decoration: none;
        color: #333;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        transition: background-color 0.3s ease;
    }

    .letter-button:hover {
        background-color: #f5f5f5;
    }

    .pagination {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    #searchButton {
        background-color: #007bff; /* 设置按钮背景颜色 */
        color: white; /* 设置按钮文字颜色 */
    }

    #searchButton:hover {
        background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
    }

    /* 自定义样式 */
    .custom-button {
        margin-right: 5px;
    }
</style>
<body>
<div class="container">
    <h1 th:text="${#session.getAttribute('title')}"></h1>
    <h1 th:text="${#session.getAttribute('smallTitle')}"></h1><br>
    <div class="input-group mb-3">
        <label for="searchInput"></label><input type="text" class="form-control" id="searchInput"
                                                placeholder="请输入姓名进行搜索">
        <!-- 搜索按钮 -->
        <button class="btn btn-secondary custom-button" id="searchButton">搜索</button>
        <button class="btn btn-secondary custom-button" id="searchAllButton">显示全部</button>
        <!-- 导出 -->
        <div style="margin-left: 5px;" class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">
                    导出
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" id="exportMultipleRecordsButtonByMonth">按本月导出</a></li>
                    <li><a class="dropdown-item" id="exportMultipleRecordsButton">按多月导出</a></li>
                    <li><a class="dropdown-item" id="exportMultipleRecordsButtonByYear">按年份导出</a></li>
                    <li><a class="dropdown-item" id="exportMultipleRecordsButtonByClass">按年级导出</a></li>
                    <li><a class="dropdown-item" id="exportMultipleRecordsButtonByYearAll">全部用户导出</a></li>
                </ul>
            </div>
        </div>
    </div>
    <p>
        <span th:text="'欢迎您：'">欢迎您：</span>
        <span th:text="${#session.getAttribute('user').realName}" class="highlight-red">未获取到名字</span>
    </p>
    <div id="letter">
        <div class="letter-buttons d-flex flex-wrap justify-content-center mt-3">
            <a href="#" id="letterA" class="letter-button" data-letter="A">A</a>
            <a href="#" id="letterB" class="letter-button" data-letter="B">B</a>
            <a href="#" id="letterC" class="letter-button" data-letter="C">C</a>
            <a href="#" id="letterD" class="letter-button" data-letter="D">D</a>
            <a href="#" id="letterE" class="letter-button" data-letter="E">E</a>
            <a href="#" id="letterF" class="letter-button" data-letter="F">F</a>
            <a href="#" id="letterG" class="letter-button" data-letter="G">G</a>
            <a href="#" id="letterH" class="letter-button" data-letter="H">H</a>
            <a href="#" id="letterI" class="letter-button" data-letter="I">I</a>
            <a href="#" id="letterJ" class="letter-button" data-letter="J">J</a>
            <a href="#" id="letterK" class="letter-button" data-letter="K">K</a>
            <a href="#" id="letterL" class="letter-button" data-letter="L">L</a>
            <a href="#" id="letterM" class="letter-button" data-letter="M">M</a>
            <a href="#" id="letterN" class="letter-button" data-letter="N">N</a>
            <a href="#" id="letterO" class="letter-button" data-letter="O">O</a>
            <a href="#" id="letterP" class="letter-button" data-letter="P">P</a>
            <a href="#" id="letterQ" class="letter-button" data-letter="Q">Q</a>
            <a href="#" id="letterR" class="letter-button" data-letter="R">R</a>
            <a href="#" id="letterS" class="letter-button" data-letter="S">S</a>
            <a href="#" id="letterT" class="letter-button" data-letter="T">T</a>
            <a href="#" id="letterU" class="letter-button" data-letter="U">U</a>
            <a href="#" id="letterV" class="letter-button" data-letter="V">V</a>
            <a href="#" id="letterW" class="letter-button" data-letter="W">W</a>
            <a href="#" id="letterX" class="letter-button" data-letter="X">X</a>
            <a href="#" id="letterY" class="letter-button" data-letter="Y">Y</a>
            <a href="#" id="letterZ" class="letter-button" data-letter="Z">Z</a>
        </div>

    </div>
    <br>
    <br>
    <table id="pointsTable">
        <thead>
        <tr>
            <th style="text-align: center;width: 10%">
                <label>
                    <input type="checkbox" id="selectAllCheckbox"/>
                </label>
            </th>
            <th style="text-align: center;width: 15%">排名</th>
            <th style="text-align: center;width: 15%">姓名</th>
            <th style="text-align: center;width: 15%">年级</th>
            <th style="text-align: center;width: 15%">积分</th>
            <th style="text-align: center;width: 30%">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="point,status:${points.list}">
            <td>
                <label>
                    <input type="checkbox" name="selectedUsers" th:value="${point.userId}"/>
                </label>
            </td>
            <td th:text="${status.index + 1 + (pageNum - 1) * 10}"></td>
            <td class="view-record-link" th:data-id="${point.userId}" th:text="${point.realName}"></td>
            <td th:text="${point.className}"></td>
            <td th:text="${point.points}"></td>
            <td>
                <span class="operation-btn" th:data-id="${point.userId}">删除</span>
                <span class="operation-btn-password" th:data-id="${point.userId}">重置密码</span>
                <span class="operation-btn-class" th:data-id="${point.userId}">修改年级</span>
            </td>
        </tr>
        </tbody>
    </table>
    <!-- 分页导航 -->
    <br>
    <br>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item" th:class="${pageNum eq 1} ? 'disabled' : ''">
                <a class="page-link" th:href="@{/toAdminIndex(pageNum=1)}">首页</a>
            </li>
            <li class="page-item" th:class="${pageNum eq 1} ? 'disabled' : ''">
                <a class="page-link" th:href="@{/toAdminIndex(pageNum=${pageNum}-1)}">上一页</a>
            </li>
            <li class="page-item" th:class="${pageNum eq pages} ? 'disabled' : ''">
                <a class="page-link" th:href="@{/toAdminIndex(pageNum=${pageNum}+1)}">下一页</a>
            </li>
            <li class="page-item" th:class="${pageNum eq pages} ? 'disabled' : ''">
                <a class="page-link" th:href="@{/toAdminIndex(pageNum=${pages})}">尾页</a>
            </li>
        </ul>
    </nav>
</div>
<!-- 模态框 -->
<div class="modal fade" id="operationModal" tabindex="-1" aria-labelledby="operationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="operationModalLabel">操作记录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="operationModalBody">
                <!-- 这里将填充操作记录表格 -->
            </div>
            <div class="row mb-3">
                <div class="col-md-3 offset-md-3">
                    <label for="startDate" class="form-label">开始时间</label>
                    <input type="date" class="form-control" id="startDate" name="startDate">
                </div>
                <div class="col-md-3">
                    <label for="endDate" class="form-label">结束时间</label>
                    <input type="date" class="form-control" id="endDate" name="endDate">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="exportAllRecordsButton">导出全部记录</button>
                <button type="button" class="btn btn-primary" id="exportByTimeButton">按时间导出记录</button>
            </div>
        </div>
    </div>
</div><!-- 新增模态框 -->
<div class="modal fade" id="multipleExportModal" tabindex="-1" aria-labelledby="multipleExportModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="multipleExportModalLabel">
                    选择导出时间范围（如需导出01.01的数据，请将结束时间选择到01.02）</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-3 offset-md-3">
                        <label for="startDateMany" class="form-label">开始时间</label>
                        <input type="date" class="form-control" id="startDateMany" name="startDate">
                    </div>
                    <div class="col-md-3">
                        <label for="endDateMany" class="form-label">结束时间</label>
                        <input type="date" class="form-control" id="endDateMany" name="endDate">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmExportButton">确认导出</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="multipleExportModalAll" tabindex="-1" aria-labelledby="multipleExportModalLabelAll"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="multipleExportModalLabelAll">
                    选择导出时间范围（如需导出01.01的数据，请将结束时间选择到01.02）</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-3 offset-md-3">
                        <label for="startDateManyAll" class="form-label">开始时间</label>
                        <input type="date" class="form-control" id="startDateManyAll" name="startDate">
                    </div>
                    <div class="col-md-3">
                        <label for="endDateManyAll" class="form-label">结束时间</label>
                        <input type="date" class="form-control" id="endDateManyAll" name="endDate">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmExportButtonAll">确认导出</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="multipleExportModalByYear" tabindex="-1" aria-labelledby="multipleExportModalLabelByYear"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="multipleExportModalLabelByYear">
                    选择导出时间范围（如填2023-2024则导出为2023.01.01到2024.01.01）</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="startYear">开始年份:</label>
                        <input type="number" class="form-control" id="startYear" min="1900" max="2100">
                    </div>
                    <div class="form-group">
                        <label for="endYear">结束年份:</label>
                        <input type="number" class="form-control" id="endYear" min="1900" max="2100">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmExportButtonByYear">确认导出</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="multipleExportModalClass" tabindex="-1" aria-labelledby="multipleExportModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="multipleExportModalLabelClass">
                    选择导出时间范围（如需导出01.01的数据，请将结束时间选择到01.02）</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="form-group" id="gradeSelectDiv">
                <label for="gradeSelect"></label><select class="form-control" id="gradeSelect" required>
                    <option value="">请选择年级</option>
                </select>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-3 offset-md-3">
                        <label for="startDateManyClass" class="form-label">开始时间</label>
                        <input type="date" class="form-control" id="startDateManyClass" name="startDate">
                    </div>
                    <div class="col-md-3">
                        <label for="endDateManyClass" class="form-label">结束时间</label>
                        <input type="date" class="form-control" id="endDateManyClass" name="endDate">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmExportButtonClass">确认导出</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="updateClassModal" tabindex="-1" aria-labelledby="multipleExportModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="form-group" id="updateGradeSelectDiv">
                <label for="updateGradeSelect"></label>
                <select class="form-control" id="updateGradeSelect" required>
                <option value="">请选择年级</option>
            </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateClassButton">确认修改</button>
            </div>
        </div>
    </div>
</div>
<footer class="footer fixed-bottom">
    <div class="footer-links d-flex justify-content-center">
        <a href="toAdminIndex" class="footer-link active"><i class="fas fa-chart-line"></i> 排行榜</a>
        <a href="toBar" class="footer-link"><i class="fas fa-chart-bar"></i> 分析情况</a>
        <a href="toSetting" class="footer-link"><i class="fas fa-cog"></i> 设置</a>
    </div>
</footer>
</body>
<!--获取年级-->
<script>
    $(document).ready(function(){
        function populateSelect(data) {
            var selectElement = $('#gradeSelect');

            // 清空已有的选项
            selectElement.empty().append('<option value="">请选择年级</option>');

            // 添加新的选项
            $.each(data, function(index, item) {
                selectElement.append($('<option>', {
                    value: item.classId,
                    text : item.className
                }));
            });
            var updateGradeSelect = $('#updateGradeSelect');

            // 清空已有的选项
            updateGradeSelect.empty().append('<option value="">请选择年级</option>');

            // 添加新的选项
            $.each(data, function(index, item) {
                updateGradeSelect.append($('<option>', {
                    value: item.classId,
                    text : item.className
                }));
            });
        }

        // AJAX调用后端接口
        $.ajax({
            url: "/selectClasses", // 替换为实际的API地址
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // 成功获取数据后填充下拉框
                populateSelect(data);
            },
            error: function() {
                // 请求失败时的处理
                alert('获取年级列表失败，请稍后再试。');
            }
        });
    });
</script>
<script>
    $(document).ready(function () {
        function highlightLetterButton(letter) {
            // 移除所有按钮上的高亮类
            $('.letter-button').removeClass('letter-button-highlight');

            // 添加高亮类到当前点击的字母按钮
            $('[data-letter="' + letter + '"]').addClass('letter-button-highlight');

            // 更新URL以反映当前点击的字母
            var url = window.location.href.split('?')[0]; // 获取当前页面的基本URL
            var newUrl = url + '?letter=' + letter;
            history.pushState(null, null, newUrl);
        }

// 绑定点击事件
        $('.letter-button').click(function () {
            var letter = $(this).data('letter'); // 获取点击的字母
            searchByLetter(letter); // 调用搜索函数
            highlightLetterButton(letter); // 高亮当前字母
        });

// 页面加载时根据URL高亮字母
        $(document).ready(function () {
            var urlParams = new URLSearchParams(window.location.search);
            var letter = urlParams.get('letter');
            if (letter) {
                highlightLetterButton(letter);
            }
        });
        // 处理分页链接点击
        $('.page-link').on('click', function () {
            window.location.href = $(this).attr('href');
        });

        // 绑定点击事件到操作按钮
        $('.operation-btn').on('click', function () {
            var id = $(this).data('id'); // 获取数据ID
            if (confirm('确认删除该用户？')) {
                $.ajax({
                    url: '/deleteUser', // 修改为你的后端接口地址
                    type: 'POST',
                    data: {id: id},
                    success: function () {
                        alert('删除成功！');
                        location.reload(); // 刷新页面
                    },
                    error: function () {
                        alert('发生错误，请稍后再试。');
                    }
                });
            }
        });

        // 绑定点击事件到重置密码按钮
        $('.operation-btn-password').on('click', function () {
            var id = $(this).data('id'); // 获取数据ID
            if (confirm('确认重置该用户密码？')) {
                $.ajax({
                    url: '/updateUserPassword', // 修改为你的后端接口地址
                    type: 'POST',
                    data: {id: id},
                    success: function () {
                        alert('重置成功！');
                        location.reload(); // 刷新页面
                    },
                    error: function () {
                        alert('发生错误，请稍后再试。');
                    }
                });
            }
        });
        // 绑定点击事件到重置密码按钮
        $('.operation-btn-class').on('click', function () {
            var id = $(this).data('id'); // 获取数据ID
            // 显示模态框
            $('#updateClassModal').modal('show');
            $('#updateClassButton').on('click', function () {
                var grade = $('#updateGradeSelect').val();
                if (grade.length > 0) {
                    if (confirm('确认修改年级？')) {
                        $.ajax({
                            url: '/updateUserClass', // 修改为你的后端接口地址
                            type: 'POST',
                            data: {id: id, grade: grade},
                            success: function () {
                                alert('修改成功！');
                                location.reload(); // 刷新页面
                            },
                            error: function () {
                                alert('发生错误，请稍后再试。');
                            }
                        });
                    } else {
                        id = '';
                        grade = '';
                    }
                } else {
                    alert('请选择年级')
                }
            })
        });

        function formatDate(dateStr) {
            var date = new Date(dateStr);
            var year = date.getFullYear();
            var month = ('0' + (date.getMonth() + 1)).slice(-2); // +1 因为 getMonth() 是从 0 开始的
            var day = ('0' + date.getDate()).slice(-2);
            return year + month + day;
        }

        function formatDateTime(dateStr) {
            return moment(dateStr).format('YYYY/MM/DD HH:mm');
        }

        // 绑定点击事件到查看记录按钮
        $('.view-record-link').on('click', function () {
            var id = $(this).data('id');

            // 绑定点击事件到导出全部记录按钮
            $("#exportAllRecordsButton").click(function () {
                exportRecords(id, 0, 0);
            });

            // 处理时间选择器模态框中的导出记录按钮点击事件
            $("#exportByTimeButton").on("click", function () {
                var startTime = $('#startDate').val();
                var endTime = $('#endDate').val();
                if (startTime && endTime) {
                    exportRecords(id, formatDate(startTime), formatDate(endTime));
                } else {
                    alert('请选择有效的开始和结束时间！');
                }
            });

            // 显示模态框
            $('#operationModal').modal('show');

            // 发送AJAX请求以获取操作记录
            $.ajax({
                url: '/getAdminOperationRecords',
                type: 'POST',
                data: {userId: id},
                success: function (records) {
                    // 清除模态框内的内容
                    $('#operationModalBody').empty();

                    // 创建操作记录表格
                    var tableHtml = '<table class="table table-bordered">';
                    tableHtml += '<thead>';
                    tableHtml += '<tr>';
                    tableHtml += '<th>操作人</th>';
                    tableHtml += '<th>类型</th>';
                    tableHtml += '<th>操作积分</th>';
                    tableHtml += '<th>操作前积分</th>';
                    tableHtml += '<th>操作后积分</th>';
                    tableHtml += '<th>操作时间</th>';
                    tableHtml += '<th>备注</th>';
                    tableHtml += '</tr>';
                    tableHtml += '</thead>';
                    tableHtml += '<tbody>';
                    records.forEach(function (record) {
                        tableHtml += '<tr>';
                        tableHtml += '<td>' + record.operator + '</td>';
                        tableHtml += '<td>';
                        if (record.operationType === 1) {
                            tableHtml += '<span class="highlight-red">减少</span>';
                        } else if (record.operationType === 2) {
                            tableHtml += '<span class="highlight-green">增加</span>';
                        }
                        tableHtml += '</td>';
                        tableHtml += '<td>';
                        if (record.operationType === 1) {
                            tableHtml += '<span class="highlight-red">-' + record.operatorPoints + '</span>';
                        } else if (record.operationType === 2) {
                            tableHtml += '<span class="highlight-green">+' + record.operatorPoints + '</span>';
                        }
                        tableHtml += '</td>';
                        tableHtml += '<td>' + record.oldPoints + '</td>';
                        tableHtml += '<td>' + record.newPoints + '</td>';
                        tableHtml += '<td>' + formatDateTime(record.operationTime) + '</td>';
                        tableHtml += '<td>' + record.notes + '</td>';
                        tableHtml += '</tr>';
                    });
                    tableHtml += '</tbody>';
                    tableHtml += '</table>';

                    // 添加表格到模态框内
                    $('#operationModalBody').append(tableHtml);
                },
                error: function () {
                    alert('发生错误，请稍后再试。');
                }
            });
        });

        function exportRecords(userId, startDate, endDate) {
            window.open('/exportRecords?startDate=' + startDate + '&endDate=' + endDate + '&userId=' + userId);
        }

        // 获取当前日期
        const currentDate = new Date();
        // 获取当前月份的第一天
        const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
        // 获取当前月份的最后一天
        const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);

        // 当模态框显示时设置默认值
        $('#operationModal').on('show.bs.modal', function () {
            const startDateInput = $('#startDate');
            const endDateInput = $('#endDate');
            startDateInput.val(formatDate(firstDayOfMonth));
            endDateInput.val(formatDate(lastDayOfMonth));
        });

        // 当模态框显示时设置默认值
        $('#multipleExportModal').on('show.bs.modal', function () {
            const startDate = $('#startDateMany');
            const endDate = $('#endDateMany');
            startDate.val(formatDate(firstDayOfMonth));
            endDate.val(formatDate(lastDayOfMonth));
        });

        // 全选框与子复选框同步
        $('#selectAllCheckbox').click(function () {
            var isChecked = this.checked;
            $('input[name="selectedUsers"]').prop('checked', isChecked);
        });

        // 子复选框状态改变时更新全选框状态
        $('input[name="selectedUsers"]').change(function () {
            var allChecked = $('input[name="selectedUsers"]').length === $('input[name="selectedUsers"]:checked').length;
            $('#selectAllCheckbox').prop('checked', allChecked);
        });
        // 导出多人记录按钮
        $('#exportMultipleRecordsButtonByYearAll').click(function () {
            $('#multipleExportModalAll').modal('show'); // 打开模态框
        });

        // 确认导出按钮
        $('#confirmExportButtonAll').click(function () {
            var startDate = $('#startDateManyAll').val();
            var endDate = $('#endDateManyAll').val();
            if (startDate && endDate) {
                window.open('/exportMultipleRecords?startDate=' + formatDate(startDate) + '&endDate=' + formatDate(endDate) + '&userIds=' + '0');
                $('#multipleExportModalAll').modal('hide');
            } else {
                alert("请选择有效的时间范围！");
            }
        });
        // 导出多人记录按钮
        $('#exportMultipleRecordsButton').click(function () {
            const userIds = [];
            $('input[name="selectedUsers"]:checked').each(function () {
                userIds.push($(this).val());
            });
            if (userIds.length === 0) {
                alert("请至少选择一名用户");
                return;
            }
            $('#multipleExportModal').modal('show'); // 打开模态框
        });
        // 确认导出按钮
        $('#confirmExportButton').click(function () {
            const userIds = [];
            $('input[name="selectedUsers"]:checked').each(function () {
                userIds.push($(this).val());
            });
            var startDate = $('#startDateMany').val();
            var endDate = $('#endDateMany').val();
            if (startDate && endDate && userIds.length > 0) {
                window.open('/exportMultipleRecords?startDate=' + formatDate(startDate) + '&endDate=' + formatDate(endDate) + '&userIds=' + userIds.join(','));
                $('#multipleExportModal').modal('hide');
            } else {
                alert("请选择有效的时间范围并至少选择一名用户！");
            }
        });
        // 导出多人记录按钮
        $('#exportMultipleRecordsButtonByYear').click(function () {
            const userIds = [];
            $('input[name="selectedUsers"]:checked').each(function () {
                userIds.push($(this).val());
            });
            if (userIds.length === 0) {
                alert("请至少选择一名用户");
                return;
            }
            $('#multipleExportModalByYear').modal('show'); // 打开模态框
        });
        // 导出多人记录按钮
        $('#exportMultipleRecordsButtonByClass').click(function () {
            $('#multipleExportModalClass').modal('show'); // 打开模态框
        });

        // 确认导出按钮
        $('#confirmExportButtonClass').click(function () {
            var grade = $('#gradeSelect').val();
            var startDate = $('#startDateManyClass').val();
            var endDate = $('#endDateManyClass').val();
            if (startDate && endDate && grade.length > 0) {
                $.ajax({
                    url: '/selectUserByClass', // 修改为你的后端接口地址
                    type: 'POST',
                    data: {grade: grade},
                    success: function (data) {
                        window.open('/exportMultipleRecords?startDate=' + formatDate(startDate) + '&endDate=' + formatDate(endDate) + '&grade=' + grade + '&userIds=' + data.join(','));
                        $('#multipleExportModalClass').modal('hide');
                    },
                    error: function () {
                        alert('发生错误，请稍后再试。');
                    }
                });
            } else {
                alert("请选择有效的时间范围并至少选择一个年级！");
            }
        });
        // 确认导出按钮
        $('#confirmExportButtonByYear').click(function () {
            const userIds = [];
            $('input[name="selectedUsers"]:checked').each(function () {
                userIds.push($(this).val());
            });
            var startDate = $('#startYear').val();
            var endDate = $('#endYear').val();
            console.log(startDate)
            console.log(endDate)
            if (startDate && endDate && userIds.length > 0) {
                window.open('/exportMultipleRecords?startDate=' + startDate + '0101' + '&endDate=' + endDate + '0101' + '&userIds=' + userIds.join(','));
                $('#multipleExportModal').modal('hide');
            } else {
                alert("请选择有效的时间范围并至少选择一名用户！");
            }
        });
        // 导出多人记录按钮
        $('#exportMultipleRecordsButtonByMonth').click(function () {
            const userIds = [];
            $('input[name="selectedUsers"]:checked').each(function () {
                userIds.push($(this).val());
            });
            if (userIds.length === 0) {
                alert("请至少选择一名用户");
            } else {
                window.open('/exportMultipleRecords?startDate=' + formatDate(firstDayOfMonth) + '&endDate=' + formatDate(lastDayOfMonth) + '&userIds=' + userIds.join(','));
            }
        });
        $(document).ready(function () {
            $('#searchButton').click(function () {
                var name = $('#searchInput').val();
                if (name.trim() !== '') {
                    window.location.href = "toAdminIndex?name=" + name;
                    var element = document.getElementById('pagination');
                    var letter = document.getElementById('letter');
                    element.style.display = 'none'; // 改变文本颜色为红色
                    letter.style.display = 'none'; // 改变文本颜色为红色
                } else {
                    alert('请输入姓名');
                }
            });
            $('#searchAllButton').click(function () {
                window.location.href = "toAdminIndex?pageNum=" + 1;
                var element = document.getElementById('pagination');
                var letter = document.getElementById('letter');
                element.style.display = 'flex'; // 改变文本颜色为红色
                letter.style.display = 'flex'; // 改变文本颜色为红色
            });

        });
        // 绑定点击事件
        $('.letter-button').click(function () {
            var letter = $(this).text(); // 获取点击的字母
            searchByLetter(letter); // 调用搜索函数
        });

        function searchByLetter(letter) {
            window.location.href = "toAdminIndex?letter=" + letter;
            var element = document.getElementById('pagination');
            element.style.display = 'none'; // 改变文本颜色为红色
        }
    });
</script>
</html>